<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>前后端交互</div>
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">
    /*
      前后端交互-异步编程
    */
  /*  let val1 = '初始值：step1';
    //
    // 基于jQuery的方式发送Ajax请求
    $.ajax({
      url: 'http://localhost:8082/data1',
      success: function(data) {
        console.log("步骤2："+data);  //  response data1
        val1 = data;
        console.log("步骤3："+val1)   //  response data1
      }
    });
    // 前面的ajax是异步请求
    console.log("步骤一："+val1)      // 初始值：step1*/
    
    /*
      发送3个Ajax请求
        谁先返回就输出谁         
    */
   /*  $.ajax({
      url: 'http://localhost:8082/data1',
      success: function(data) {
        console.log("data1：" + data)
      }
    });
    $.ajax({
      url: 'http://localhost:8082/data2',
      success: function(data) {
        console.log("data2：" + data)
      }
    });
    $.ajax({
      url: 'http://localhost:8082/data3',
      success: function(data) {
        console.log("data3：" + data)
      }
    });
 */
     /* 
     发送3个Ajax请求并且保证顺序 
     嵌套Ajax就可以保证顺序执行
     */
   $.ajax({
      url: 'http://localhost:8082/data1',
      success: function(data) {
        console.log("data1：" + data)
        $.ajax({
          url: 'http://localhost:8082/data2',
          success: function(data) {
            console.log("data2 " + data)
            $.ajax({
              url: 'http://localhost:8082/data3',
              success: function(data) {
                console.log("data3 " + data)
              }
            });
          }
        });
      }
    });
  </script>
</body>
</html>